<template>
  <div>
    <h2> {{$store.state.count}}</h2>
    <h2> getters:{{$store.getters.pingfang}}</h2>
    <h2>大于20岁的学生:{{$store.getters.filterStu}}</h2>
    <h2>大于20岁的学生个数:{{$store.getters.filterStuLength}}</h2>

    <h2>大于?(自己传参)岁的学生个数:{{$store.getters.moreAgeStu(30)}}</h2>
    mapstate对象式
    <h2>{{count}}</h2>
    <h2>{{countPlusLocalState}}</h2>
    <h2>{{info}}</h2>
    <h2>{{students}}</h2>
    mapgetters对象式
    <h2>{{pingfang}}</h2>
    <h2>年龄大于20的学生 {{filterStu}}</h2>

    <h2>namespaced的使用</h2>
      <h3>{{name}}</h3>
      <h3>{{hobby}}</h3>
      <h3>{{fullname}}</h3>
      <h3>{{addfullname}}</h3>
      <h3>{{Afullname}} a a a </h3>
      <h3>{{$store.state.A.hobby}} a a a </h3>

  </div>
</template>

<script>
  import {mapState,mapActions,mapGetters,mapMutations} from 'vuex';
  export default {
    name: "HelloVuex",
    //父传子
    /* props:{
       count:Number
     }*/
    computed:{
       // 注意写法  右侧必须加单引号★★★
      ...mapState({
        // 第二次对state的数据加工
        countPlusLocalState (state) {
          console.log(state);
          return state.count + 100
        },
        count:'count',
        info:'info',
        students:'students'
      }),
     /* ...mapState({
        count: state => state.count
        ,info:'info',students:'students'}),*/
      ...mapState('A',['name','hobby']),

      ...mapGetters({'pingfang':'pingfang',filterStu:'filterStu'}),
      ...mapGetters('A',{fullname:'fullname',addfullname:'addfullname'}),
      Afullname(){
        // 对于命名空间里面的 getters 拿值比较特殊，， commit的时候与这里是一样的
      return this.$store.getters['A/fullname']
      }
    },
    mounted() {
      const  mapstate =  mapState({'count':'count',info:'info',students:'students'})
      console.log('mapstate',mapstate)

      const  mapgetters =  mapState({'pingfang':'pingfang',filterStu:'filterStu'})
      console.log('mapgetters',mapgetters)
    },
    data(){
      return{

      }
    },
    methods:{

    }
  }
</script>

<style scoped>

</style>
